<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 1200px;
            margin: 0 auto;
        }
        .box .header,.footer{
            height: 100px;
            width: 1200px;
            background-color: springgreen;
            font-size: 80px;
            text-align: center;
            line-height: 100px;
            color: #fff;
        }
        ul,li{
            list-style: none;
        }
        ul{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        ul > li{
            width: 280px;
            height: 500px;
            border: 1px solid gray;
            margin-top: 10px;
        }
        img{
            width: 280px;
            height: 350px;
        }
        ul>li>p{
            padding: 0 10px;
        }
        .pagination{
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .pagination p{
            margin:0 20px;
            width: 30px;
            height: 30px;
            background-color: springgreen;
            text-align: center;
            line-height: 30px;
            font-weight: 700;

            /* 添加小手的效果 */
            cursor: pointer;
        }
        .pagination p.disable{
            cursor: not-allowed;
            background-color: gray;
        }
        select{
            width: 50px;
            height: 30px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="header">头部</div>
        <div class="pagination">
            <p class="prev">&lt;</p>
            <span class="up">1</span>
            /
            <span class="down">4</span>
            <p class="next">&gt;</p>
            <select>
                <option value="4">4</option>
                <option value="8">8</option>
                <option value="12">12</option>
                <option value="16">16</option>
            </select>
        </div>
        <div class="content">
            <ul>
                <li>
                    <img src="" alt="">
                    <p>2020西太湖国际应跃进</p>
                    <p>城市:常州</p>
                    <p>地址:常州席太平个地方回家看电视</p>
                    <p>价格:23323</p>
                    <p>演出时间:2022</p>
                </li>
            </ul>
        </div>
        <div class="footer">尾部</div>
    </div>
    <script src="./dm_list.js"></script>
    <script>
        //获取要点击的按钮
        var prevBtn = document.querySelector(".prev")
        var nextBtn = document.querySelector(".next")
        var select = document.querySelector("select")
        var up = document.querySelector(".up")
        var down = document.querySelector(".down")
        var ul = document.querySelector("ul")
        /* 
            第一页打开页面的时候,我要能看到的页面就是默认的装填
                var current =  3;
                var pageNum = 4;
            默认显示的数据状态
                第1页   一页显示4条     0~3
                第1页   一页显示8条     0~7
                第1页   一页显示12条    0~11
                第2页   一页显示4条     4~7
                第2页   一页显示8条     8~15
                第2页   一页显示12条    12~23
                第3页   一页显示4条     8~11
                第3页   一页显示8条     16~23
                第4页   一页显示4条     12~15
                x       y              (x-1)*y~(x*y-1)
            显示数据
        */
        //默认为第三页
        var current =  3;
        //默认一页显示4条
        var pageNum = 4;
        var str = ""
        // list.slice(0,4)
        // 得到是第一页的渲染的数据
        var arr = list.slice((current-1)*pageNum,(current*pageNum-1+1))
        arr.forEach(function(item){
            str+=`
                <li>
                    <img src="${item.pic}" alt="">
                    <p>${item.name}</p>
                    <p>城市:${item.city}</p>
                    <p>地址:${item.address}</p>
                    <p>价格:${item.price}</p>
                    <p>演出时间:${item.showTime}</p>
                </li>
            `
        })
        console.log(str);
        ul.innerHTML = str;
    </script>
</body>
</html>